<template>
<el-dialog
  title="新增设备"
  :visible="sbglVisible"
  width="40%"
  @close="closeFn">
  <span>
    <el-form label-position="right" label-width="100px" :model="sbForm">
  <el-form-item label="设备编号：">
    <p>系统自动生成</p>
  </el-form-item>
  <el-form-item label="选择型号：">
    <el-select  placeholder="请选择" style="width:90%" v-model="sbForm.vmType">
      <el-option :label="item.name" :value="item.typeId" v-for="item in xinghaoList" :key="item.typeId"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="选择点位：">
    <el-select  placeholder="请选择" style="width:90%" v-model="sbForm.nodeId">
      <el-option :label="item.name" :value="item.id" v-for="item in dianweiList" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
</el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeFn">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { getuserId } from '@/utils/localStorage'
import { xinghao, dianwei, addSb } from '@/api/shebeiguanli/shebeiguanli'
export default {
  props: {
    sbglVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      sbForm: {
        createUserId: getuserId(),
        vmType: '',
        nodeId: ''
      },
      xinghaoList: [],
      dianweiList: []
    }
  },
  created () {
    this.xzXinghao()
  },
  mounted () {},
  methods: {
    closeFn () {
      this.$emit('update:sbglVisible', false)
      this.sbForm = {
        createUserId: getuserId(),
        vmType: '',
        nodeId: ''
      }
    },
    // 选择型号和点位
    async xzXinghao () {
      const { data } = await xinghao({ pageIndex: 1, pageSize: 100000 })
      this.xinghaoList = data.currentPageRecords
      const res = await dianwei({ pageIndex: 1, pageSize: 100000 })
      this.dianweiList = res.data.currentPageRecords
    },
    async submit () {
      await addSb(this.sbForm)
      this.$emit('gengxin')
      this.closeFn()
      this.$message.success('添加成功')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-dialog{
  border-radius: 10px;
  padding-left:20px ;
  .el-dialog__footer{
    text-align: center;
    .el-button--default{
      background-color: #f8eeea;
      border-color: #f8eeea;
      color: #655b56!important;
    }
    .el-button--primary{
      background-color: #ff893a;
      border-color: #ff893a;
      color: #fff;
    }
  }
}

</style>
